<template>
    <div class="app-element-dome">
        <!--  基础设置 -->
        <div>
            <el-button type="danger" @click="disabled = !disabled">
                {{ disabled ? '启用' : '禁用' }}
            </el-button>
            <h1 class="c-FF4719">按钮</h1>
            <div class="mt20">
                <el-button
                    class="srt-el-button"
                    :disabled="disabled"
                    @click="copy('srt-el-button')"
                >
                    次按钮1
                </el-button>
                <el-button
                    class="srt-el-button srt-el-button--primary"
                    @click="copy('srt-el-button srt-el-button--primary')"
                    :disabled="disabled"
                    plain
                >
                    主按钮
                </el-button>
                <el-button
                    class="srt-el-button srt-el-button--info"
                    @click="copy('srt-el-button srt-el-button--info')"
                    :disabled="disabled"
                >
                    主按钮
                </el-button>
                <el-button
                    class="srt-el-button srt-el-button--cancel"
                    @click="copy('srt-el-button srt-el-button--cancel')"
                    :disabled="disabled"
                >
                    主按钮
                </el-button>
                <el-button
                    class="srt-el-button srt-el-button--link"
                    @click="copy('srt-el-button srt-el-button--link')"
                    :disabled="disabled"
                >
                    主按钮
                </el-button>

                <el-button
                    class="srt-el-button srt-el-button--link-underline"
                    @click="copy('srt-el-button srt-el-button--link-underline')"
                    :disabled="disabled"
                >
                    主按钮1
                </el-button>
                <el-button
                    class="srt-el-button srt-el-button--link-underline noUnderline"
                    @click="copy('srt-el-button srt-el-button--link-underline noUnderline')"
                    :disabled="disabled"
                >
                    主按钮1
                </el-button>
            </div>
            <div class="mt20">
                <el-button
                    class="srt-el-button srt-el-button-h28"
                    :disabled="disabled"
                    @click="copy('srt-el-button srt-el-button-h28')"
                >
                    按钮
                </el-button>
                <el-button
                    class="srt-el-button srt-el-button--primary srt-el-button-h28"
                    @click="copy('srt-el-button srt-el-button--primary srt-el-button-h28')"
                    :disabled="disabled"
                    plain
                >
                    按钮
                </el-button>
                <el-button
                    class="srt-el-button srt-el-button--info srt-el-button-h28"
                    @click="copy('srt-el-button srt-el-button--info srt-el-button-h28')"
                    :disabled="disabled"
                >
                    主按钮
                </el-button>
                <el-button
                    class="srt-el-button srt-el-button--cancel srt-el-button-h28"
                    @click="copy('srt-el-button srt-el-button--cancel srt-el-button-h28')"
                    :disabled="disabled"
                >
                    主按钮
                </el-button>
                <el-button
                    class="srt-el-button srt-el-button--link srt-el-button-h28"
                    @click="copy('srt-el-button srt-el-button--link srt-el-button-h28')"
                    :disabled="disabled"
                >
                    主按钮
                </el-button>
                <el-button
                    class="srt-el-button srt-el-button--link-underline srt-el-button-h28"
                    @click="copy('srt-el-button srt-el-button--link-underline srt-el-button-h28')"
                    :disabled="disabled"
                >
                    主按钮1
                </el-button>
                <el-button
                    class="srt-el-button srt-el-button--link-underline srt-el-button-h28 noUnderline"
                    @click="
                        copy(
                            'srt-el-button srt-el-button--link-underline srt-el-button-h28 noUnderline'
                        )
                    "
                    :disabled="disabled"
                >
                    主按钮1
                </el-button>
            </div>
            <div class="mt20">
                <el-button
                    class="srt-el-button srt-el-button-h32"
                    :disabled="disabled"
                    @click="copy('srt-el-button srt-el-button-h32')"
                >
                    按钮
                </el-button>
                <el-button
                    class="srt-el-button srt-el-button--primary srt-el-button-h32"
                    @click="copy('srt-el-button srt-el-button--primary srt-el-button-h32')"
                    :disabled="disabled"
                    plain
                >
                    按钮
                </el-button>
                <el-button
                    class="srt-el-button srt-el-button--info srt-el-button-h32"
                    @click="copy('srt-el-button srt-el-button--info srt-el-button-h32')"
                    :disabled="disabled"
                >
                    主按钮
                </el-button>
                <el-button
                    class="srt-el-button srt-el-button--cancel srt-el-button-h32"
                    @click="copy('srt-el-button srt-el-button--cancel srt-el-button-h32')"
                    :disabled="disabled"
                >
                    主按钮
                </el-button>

                <el-button
                    class="srt-el-button srt-el-button--link srt-el-button-h32"
                    @click="copy('srt-el-button srt-el-button--link srt-el-button-h32')"
                    :disabled="disabled"
                >
                    主按钮
                </el-button>

                <el-button
                    class="srt-el-button srt-el-button--link-underline srt-el-button-h32"
                    @click="copy('srt-el-button srt-el-button--link-underline srt-el-button-h32')"
                    :disabled="disabled"
                >
                    主按钮1
                </el-button>
                <el-button
                    class="srt-el-button srt-el-button--link-underline srt-el-button-h32 noUnderline"
                    @click="
                        copy(
                            'srt-el-button srt-el-button--link-underline srt-el-button-h32 noUnderline'
                        )
                    "
                    :disabled="disabled"
                >
                    主按钮1
                </el-button>
            </div>
            <div class="mt20">
                <el-button
                    class="srt-el-button srt-el-button-h36"
                    :disabled="disabled"
                    @click="copy('srt-el-button srt-el-button-h36')"
                >
                    按钮
                </el-button>
                <el-button
                    class="srt-el-button srt-el-button--primary srt-el-button-h36"
                    @click="copy('srt-el-button srt-el-button--primary srt-el-button-h36')"
                    :disabled="disabled"
                    plain
                >
                    按钮
                </el-button>
                <el-button
                    class="srt-el-button srt-el-button--info srt-el-button-h36"
                    @click="copy('srt-el-button srt-el-button--info srt-el-button-h36')"
                    :disabled="disabled"
                >
                    主按钮
                </el-button>
                <el-button
                    class="srt-el-button srt-el-button--cancel srt-el-button-h36"
                    @click="copy('srt-el-button srt-el-button--cancel srt-el-button-h36')"
                    :disabled="disabled"
                >
                    主按钮
                </el-button>
                <el-button
                    class="srt-el-button srt-el-button--link srt-el-button-h36"
                    @click="copy('srt-el-button srt-el-button--link srt-el-button-h36')"
                    :disabled="disabled"
                >
                    主按钮
                </el-button>
                <el-button
                    class="srt-el-button srt-el-button--link-underline srt-el-button-h36"
                    @click="copy('srt-el-button srt-el-button--link-underline srt-el-button-h36')"
                    :disabled="disabled"
                >
                    主按钮1
                </el-button>
                <el-button
                    class="srt-el-button srt-el-button--link-underline srt-el-button-h36 noUnderline"
                    @click="
                        copy(
                            'srt-el-button srt-el-button--link-underline srt-el-button-h36 noUnderline'
                        )
                    "
                    :disabled="disabled"
                >
                    主按钮1
                </el-button>
            </div>
            <h1 class="mt50 c-FF4719">下拉框</h1>
            <div class="mt20">
                <el-tooltip placement="top">
                    <template #content>
                        <p>1 需要添加 srt-bottom-select 类</p>
                        <p>2 需要添加 :teleported="false" 属性</p>
                        <p>3 需要添加 popper-class="srt-select-popper" 属性</p>
                        <p>4 后缀图片 需要suffix-icon 设置</p>
                        <p>5 高度按element size 设置</p>
                        <p>-----------</p>

                        <p>可以使用element ui的 icon</p>
                        <p>
                            :suffix-icon="CaretTop" import { CaretTop } from
                            '@element-plus/icons-vue'
                        </p>
                    </template>
                    <span>Tooltip</span>
                </el-tooltip>

                <el-select
                    v-model="value"
                    class="ml10 srt-bottom-select"
                    placeholder="Select"
                    size="large"
                    :teleported="false"
                    popper-class="srt-select-popper"
                    :suffix-icon="CaretTop"
                    :disabled="disabled"
                >
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
                <el-select
                    v-model="value"
                    class="ml10 srt-select"
                    placeholder="Select"
                    size="large"
                   popper-class="srt-select-popper"
                    :suffix-icon="CaretTop"
                  
                    :disabled="disabled"
                >
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
                <el-tooltip placement="top">
                    <template #content>
                        <p>1 需要添加 srt-select 类</p>
                        <p>2 需要添加 :teleported="false" 属性</p>
                        <p>3 需要添加 popper-class="srt-select-popper" 属性</p>
                        <p>4 后缀图片 需要suffix-icon 设置</p>
                        <p>4 高度按element size 设置</p>
                        <p>-----------</p>

                        <p>可以使用element ui的 icon</p>
                        <p>
                            :suffix-icon="CaretTop" import { CaretTop } from
                            '@element-plus/icons-vue'
                        </p>
                    </template>
                    <span class="ml10">Tooltip</span>
                </el-tooltip>
                <div>
                    <span>select自定义清除icon:</span>
                    <el-select
                        v-model="value"
                        :class="['ml10', 'srt-bottom-select', {'srt-bottom-clear-select': value}]"
                        :clearable="true"
                        placeholder="Select"
                        size="large"
                        popper-class="srt-select-popper"
                    >
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                    <el-tooltip placement="top">
                        <template #content>
                            <p>select自定义清除icon</p>
                            <p>1 需要添加 srt-bottom-select srt-bottom-clear-select 类，两个类需同时存在</p>
                            <p>2 需要添加 :clearable="true" 属性</p>
                            <p>3 后续是自身场景需求自行添加@clear事件</p>
                        </template>
                        <span class="ml10">Tooltip</span>
                    </el-tooltip>
                    <el-select
                        v-model="value"
                        :class="['ml10', 'srt-select', {'srt-clear-select': value}]"
                        :clearable="true"
                        placeholder="Select"
                        size="large"
                        popper-class="srt-select-popper"
                    >
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                    <el-tooltip placement="top">
                        <template #content>
                            <p>select自定义清除icon</p>
                            <p>1 需要添加 srt-select srt-clear-select 类，两个类需同时存在</p>
                            <p>2 需要添加 :clearable="true" 属性</p>
                            <p>3 后续是自身场景需求自行添加@clear事件</p>
                        </template>
                        <span class="ml10">Tooltip</span>
                    </el-tooltip>
                </div>
                
            </div>
            <h1 class="mt50 c-FF4719">输入框样式</h1>
            <div class="flex mt20">
                <el-form label-width="100px" style="width: 600px">
                    <el-form-item
                        class="srt-el-input-item"
                        label="age"
                        prop="age"
                        :rules="[
                            { required: true, message: 'age is required' },
                            { type: 'number', message: 'age must be a number' }
                        ]"
                    >
                        <el-input
                            v-model.number="value"
                            class="w30 srt-el-input"
                            type="text"
                            autocomplete="off"
                            :disabled="disabled"
                        />
                    </el-form-item>
                    <el-form-item class="srt-el-input-item">
                        <el-input
                            v-model="input2"
                            class="w30 m-2 srt-el-input"
                            placeholder="Please Input"
                            suffix-icon="icon-font-icon-sousuo"
                            :disabled="disabled"
                        />
                    </el-form-item>
                    <el-form-item>
                        <el-tooltip placement="top">
                            <template #content>
                                <p>1 需要添加 srt-el-input 类</p>
                                <p>2 需要添加 suffix-icon 定义右侧icon</p>
                                <p>3 如果表单验证需要在el-form-item 添加 srt-el-input-item 类</p>
                            </template>
                            <span>Tooltip</span>
                        </el-tooltip>
                    </el-form-item>
                </el-form>
                <el-form label-width="100px" style="width: 600px">
                    <el-form-item
                        class="srt-el-input-item-no-border"
                        label="age"
                        prop="age"
                        :rules="[
                            { required: true, message: 'age is required' },
                            { type: 'number', message: 'age must be a number' }
                        ]"
                    >
                        <el-input
                            v-model.number="value"
                            class="w30 srt-el-input-no-border"
                            type="text"
                            autocomplete="off"
                            :disabled="disabled"
                        />
                    </el-form-item>
                    <el-form-item>
                        <el-input
                            v-model="input2"
                            class="w30 m-2 srt-el-input-no-border"
                            placeholder="Please Input"
                            suffix-icon="icon-font-icon-sousuo"
                            :disabled="disabled"
                        />
                    </el-form-item>
                    <el-form-item>
                        <el-tooltip placement="top">
                            <template #content>
                                <p>1 需要添加 srt-el-input-no-border 类</p>
                                <p>2 需要添加 suffix-icon 定义右侧icon</p>
                                <p>
                                    3 如果表单验证需要在el-form-item 添加 srt-el-input-no-border 类
                                </p>
                            </template>
                            <span>Tooltip</span>
                        </el-tooltip>
                    </el-form-item>
                </el-form>
            </div>
            <h1 class="mt50 c-FF4719">分页器</h1>
            <div>
                <el-tooltip placement="top">
                    <template #content>
                        <p>分页器 通过 small 来判断是否是大 还是小</p>
                        <p>组件位置 src/components/pagination/pagination.vue</p>
                    </template>
                    <span>Tooltip</span>
                </el-tooltip>
            </div>
            <Pagination
                :total="500"
                :currentPage="currentPage"
                @size-change="sizeChange"
                @current-change="currentChange"
            />
            <Pagination
                class="mt10"
                small
                :total="500"
                :currentPage="currentPage"
                @size-change="sizeChange"
                @current-change="currentChange"
            />
            <h1 class="mt50 c-FF4719">单选/多选</h1>
            <div>
                <div>
                    <el-tooltip placement="top">
                        <template #content>
                            <p>多选组件需要 添加 srt-el-checkbox 类名</p>
                            <p>单选按钮需要添加 srt-el-radio 类名</p>
                        </template>
                        <span>Tooltip</span>
                    </el-tooltip>
                </div>
                <el-checkbox
                    v-model="checked1"
                    label="Option 1"
                    size="large"
                    :disabled="disabled"
                    class="srt-el-checkbox"
                />
                <el-radio-group v-model="radio1" class="ml10" :disabled="disabled">
                    <el-radio label="1" size="large" class="srt-el-radio">Option 1</el-radio>
                    <el-radio label="2" size="large" class="srt-el-radio">Option 2</el-radio>
                </el-radio-group>
            </div>
            <h1 class="mt50 c-FF4719">消息提示框</h1>
            <div>
                <el-button
                    class="srt-el-button srt-el-button--primary"
                    @click="openMessage('成功提示', 'info')"
                >
                    成功提示
                </el-button>
                <el-button
                    class="srt-el-button srt-el-button--primary"
                    @click="openMessage('失败提示')"
                >
                    失败提示
                </el-button>
                <el-button
                    class="srt-el-button srt-el-button--primary"
                    @click="
                        openConfirm(
                            '确认发表评价',
                            '123123123123123123123123123123123123123123123123123123112123', true
                        )
                    "
                >
                    询问框
                </el-button>
                 <el-button
                    class="srt-el-button srt-el-button--primary"
                    @click="
                        openConfirm(
                            '确认发表评价',
                            
                            '123123123123123123123123123123123123123123123123123123112123', false
                            
                        )
                    "
                >
                    询问框
                </el-button>
            </div>
        </div>
        <!-- 表格区域 -->
        <div>
            <h1 class="c-FF4719">表格</h1>
            <el-tooltip placement="top">
                <template #content>
                    <p>1 需要添加 srt-stripe-table 类</p>
                </template>
                <span class="ml10">Tooltip</span>
            </el-tooltip>
            <SrtElTabel />
        </div>
        <div>
            <h1 class="c-FF4719">时间筛选器</h1>
             <el-tooltip placement="top">
                <template #content>
                    <p>1 需要添加 srt-date-picker 类</p>
                </template>
                <span class="ml10">Tooltip</span>
            </el-tooltip>
            <el-date-picker
            class="srt-date-picker"
                v-model="value"
                type="daterange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                size="large"
            />
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import Pagination from '@/components/pagination/pagination.vue';
import { CaretTop } from '@element-plus/icons-vue';
import Message from '@/components/message/message.js';
import Confirm from '@/components/confirm/confirm.js';
import SrtElTabel from '@/views/element-ui-demo/element-ui-tabel.vue';
const value = ref(null);
const disabled = ref(false);
const currentPage = ref(1);
const sizePage = ref(20);
const radio1 = ref('1');

function copy(clipBoardContent) {
    console.log('clipBoardContent', clipBoardContent.value);
    let _input = document.createElement('input'); // 直接构建input
    _input.value = clipBoardContent; // 设置内容
    document.body.appendChild(_input); // 添加临时实例
    _input.select(); // 选择实例内容
    document.execCommand('Copy'); // 执行复制
    document.body.removeChild(_input); // 删除临时实例
    ElMessage.success('复制成功！');
}
const input2 = ref(null);

const options = [
    {
        value: 'Option1',
        label: 'Option1'
    },
    {
        value: 'Option2',
        label: 'Option2'
    },
    {
        value: 'Option3',
        label: 'Option3'
    },
    {
        value: 'Option4',
        label: 'Option4'
    },
    {
        value: 'Option5',
        label: 'Option5'
    }
];

const submitForm = formEl => {
    if (!formEl) return;
    formEl.validate(valid => {
        if (valid) {
            console.log('submit!');
        } else {
            console.log('error submit!');
            return false;
        }
    });
};
function currentChange(num) {
    console.log(num);
    currentPage.value = num;
}
function sizeChange(num) {
    sizePage.value = num;
}
const openMessage = (text, type) => {
    Message({ text, type, time: 5000 });
};
const openConfirm = (title, text, showFooter) => {
    Confirm({ title: title, text: text, showFooter: showFooter })
        .then(ret => {
            Message({ text: '操作成功', type: 'success' });
        })
        .catch(err => {
            // 点击取消按钮触发
            if (err === 'cancel') return;
            Message({ text: '操作取消', type: 'error' });
        });
};

</script>
<style lang="scss" scoped>
.app-element-dome {
    padding: 50px;
    text-align: center;
    width: 1200px;
    min-height: 100vh;
    margin: 0 auto;
    // background: url('~@/views/element-ui-dome/0.webp') no-repeat center;
    background-color: #ffffff;
}
.mt20 {
    margin-top: 10px;
}
.c-FF4719 {
    color: #ff4719;
}
.mt50 {
    margin-top: 50px;
}
.ml10 {
    margin-left: 10px;
}
.mt10 {
    margin-top: 10px;
}
.w30 {
    width: 30%;
}
.flex {
    display: flex;
}
.flex1 {
    flex: 1;
}
</style>
